<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>海贼王</title>
    <link rel="stylesheet" href="./css/index4.css">
    <link rel="stylesheet" href="./css/font-awesome.css">
</head>

<body>
    <div class="wrapin">
        <div class="banner"><img src="./img/timg (5).gif" alt=""></div>
        <header>
            <ul class="nav clearfix">
                <li><a href="./index1.html">首页</a></li>
                <li><a href="./index2.html">人物集</a></li>
                <li><a href="./index3.html">人物简介</a></li>
                <li><a href="./index4.html">时间线</a></li>
                <li><a href="./index5.html">登录</a></li>
            </ul>

        </header>
        <div class="con">
            <div class="top clearfix">
                <div class="text">
                    <div class="title">
                        <section id="experience">
                            <div class="container">
                                <section id="news" class="white-bg padding-top-bottom">
                                    <div class="section-title">
                                        <h2>"ONE PIECE" 路飞成长时间线</h2>
                                        <h6>总有一天，我会聚集一群不输给这些人的伙伴，并找到世界第一的财宝，我要当海贼王!—— 蒙奇·D·路飞</h6>

                                    </div>
                                    <div class="container">
                                        <div class="timeline">
                                            <div class="date-title">
                                                <span>两年历练前</span>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6 news-item">
                                                    <div class="news-content">
                                                        <div class="date">
                                                            <p>聚齐伙伴</p>
                                                        </div>
                                                        <h2 class="news-title">草帽一伙集齐</h2>
                                                        <span>路飞的梦想从东海启程</span>
                                                        <p> ① 东海篇遇剑士-索隆，黑足-山治，阻击手-乌索普，航海士-娜美，船医-乔巴 ②
                                                            阿拉巴斯坦篇打败七武海克拉克罗尔，遇哥哥火拳艾斯
                                                            ③ 空岛篇与空岛"加雅岛"的统治者艾尼路大战，偶遇黑胡子蒂奇、长链岛篇遇福克西海贼团
                                                            ④
                                                            水之都——司法岛篇新伙伴加入——船工-弗兰奇与放下心结的恶魔之子-罗宾加入，司法岛恶战草帽海贼团在全世界扬名，道别梅利号，在弗兰奇帮助下新船——"万里阳光号"造成
                                                            ⑤ 恐怖三桅船篇、香波地群岛篇新成员——音乐家-布鲁克加入，打败七武海莫利亚，到达香波地诸岛</p>
                                                        <a class="read-more" href="#">ONE PIECE</a>
                                                    </div>
                                                </div>

                                                <div class="col-sm-6 news-item right">
                                                    <div class="news-content">
                                                        <div class="date">
                                                            <p>遭遇挫折</p>
                                                        </div>
                                                        <h2 class="news-title">认识自身不足</h2>
                                                        <span>路飞失去哥哥，草帽一伙分离各自成长</span>
                                                        <p>草帽团九人在香波地岛被大熊拍飞。在此期间，路飞拍飞到女儿国，
                                                            一番奇遇之后，认识七武海女帝汉库克，并得知哥哥火拳艾斯即将被处刑，于是路飞前往顶上战争拯救哥哥，
                                                            可最后哥哥依然因伤重死亡，路飞伤心过度且伤势过重，在甚平和冥王雷利的鼓励下，路飞向伙伴们传递了两年后再见的信息。就此，草帽一伙暂分离
                                                        </p>
                                                        <a class="read-more" href="#">ONE PIECE</a>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="date-title">
                                                <span>两年历练后</span>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6 news-item">
                                                    <div class="news-content">
                                                        <div class="date">
                                                            <p>重新出发</p>
                                                        </div>
                                                        <h2 class="news-title">草帽一伙历练后重新向新世界出发</h2>
                                                        <span>香波地草帽团聚齐</span>
                                                        <p>①鱼人岛篇打败了企图攻占"鱼人岛"主权的"新鱼人海贼团"与狂追求"白星"的范德戴肯九世，拯救鱼人岛
                                                            ②
                                                            庞克哈萨德篇草帽海贼团与新晋"王下七武海"特拉法尔加·罗在此岛组成海贼团同盟，预谋拉下一个四皇，并打败多弗朗明哥座下凯撒，威逼多弗朗明哥推出七武海
                                                            ③
                                                            德雷斯罗萨篇与七武海唐吉诃德·多弗朗明哥及其家族战斗，并在战争结束之后，被路飞所解救的七组势力一起组成"草帽大船团"加入草帽麾下
                                                            ④ 象岛篇山治失踪
                                                            ⑤ 蛋糕岛大战BIG MAM，夺回山治，新伙伴——前七武海甚平加入草帽海贼团</p>
                                                        <a class="read-more" href="#">ONE PIECE</a>
                                                    </div>
                                                </div>

                                                <div class="col-sm-6 news-item right">
                                                    <div class="news-content">
                                                        <div class="date">
                                                            <p>被封五皇</p>
                                                        </div>
                                                        <h2 class="news-title">新的征程</h2>
                                                        <span>从此刻出发</span>
                                                        <p>草帽一伙从蛋糕岛逃离后，路飞在世界出名，悬赏金达15亿贝里，被予以"五皇"称号，与此同时路飞前往和之国与索隆一伙聚齐，而此时的世界会议也开始举办，ONE
                                                            PIECE的故事还在继续……</p>
                                                        <a class="read-more" href="#">ONE PIECE</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>

</body>

</html>